import { t } from 'i18next'
import React, { useEffect } from 'react'
import { MeetingCard } from './MeetingCard'
import { useObservable } from 'rxjs-hooks'
import Service from './service'
import { MeetingEntity } from './interfaces/meeting'
import { Wrap, HeaderWrap, CardListWrap, NotListStyle } from './style'
import { Search } from '@kedacom/react-next'
import ShareModal from '@/components/ShareModal'

const MeetingList = () => {
	var meetingList = useObservable<MeetingEntity[]>(() => Service.filteredMeetingList$, [])
	var searchValue = useObservable<string>(() => Service.search$, '')
	/*
	hasFirstLoad  第一次加载数据
	*/
	var hasFirstLoad = useObservable<boolean>(() => Service.hasFirstLoad$, false)
	useEffect(() => {
		Service.refreshList()
	}, [])
	const onSearchChange = (value: string): void => {
		Service.doLocalFilter(value)
	}
	return (
		<Wrap>
			<HeaderWrap>
				<div>{t('正在召开的会议（{{num}}）', { num: meetingList.length || 0 })} </div>
				<div>
					<Search
						iconAlign="left"
						maxLength={128}
						width={300}
						onClear={() => Service.doLocalFilter('')}
						onChange={(e, v) => onSearchChange(v)}
						value={searchValue}
						clearable
						placeholder={t('搜索会议名称/会议号码/发起人')}
					/>
				</div>
			</HeaderWrap>
			<CardListWrap className="cardList">
				{meetingList.map((meeting, index) => {
					return (
						<MeetingCard key={index} entity={meeting} orderArr={[index, meetingList.length]}></MeetingCard>
					)
				})}
			</CardListWrap>
			{hasFirstLoad && meetingList.length === 0 && (
				<NotListStyle>
					<div>{t('您当前没有可控制的会议，可以在“会议日程”页面创建会议。')}</div>
				</NotListStyle>
			)}
			<ShareModal />
		</Wrap>
	)
}
export default MeetingList
